<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }


        /* 如果一组元素里面，在设置浮动的时候，如果只是一个元素浮动，其他的元素
        没有浮动的情况下，由于浮动的元素脱离标准的文档流，相当于不占据原先位置，则后面的元素就会顶替之前盒子的位置，出现一个压盖的效果（浮动的盒子在该盒子之上）*/
        /* 有些网站里面是有压盖的效果。一般我们在做压盖的时候，不使用浮动实现，而是使用定位实现。*/

        /* TODO 思考：为什么会出现压盖的效果，以及如何解决？*/

        /* 可以使用清除浮动解决*/
        .box1{
            width: 200px;
            height: 300px;
            border: 1px solid #000;
            float: left;
            background-color: blue;
            /*opacity 设置元素的透明度： 1不透明 0完全透明*/
            opacity: 0.1;
        }
        .box2{
            border: 1px solid red;
            height: 400px;
            background-color: gold;
        }
        
        
        
    </style>
</head>
<body>

    <h1>浮动布局-带来的问题</h1>

    <div class="box1"></div>

    <div class="box2"></div>

</body>
</html>